<!DOCTYPE html>
<html>
<head>
    <#include "/pay/include/head_view.html" />
</head>
<body>
<div id="app">
    <div class="g-dg-search-banner">
        <i-form ref="myformRef" :model="myform" :label-width="80" inline>
            <Form-item label="适用价格">
                <i-input v-model="myform.imgPrice" placeholder="请输入"></i-input>
            </Form-item>
            <Form-item label="支付类型">
                <i-select v-model="myform.payType" :value="myform.payType" style="width:150px">
                    <i-option value="-1">所有</i-option>
                    <i-option value="1">支付宝支付</i-option>
                    <i-option value="2">微信支付</i-option>
                </i-select>
            </Form-item>
            <i-button type="info" icon="search" @click="reload">查询</i-button>

            <i-button type="error" icon="android-remove-circle" @click="remove">删除</i-button>

            <i-button type="success" icon="help" @click="help_view">帮助</i-button>


        </i-form>
    </div>
    <div class="g-dg-toolbar">

        <template>
            <Upload action="/api/pay/payprodimg/upload_qr_img"  name="uploadfile"  multiple  :show-upload-list="false" :on-success="uploadSuccess"
                    :format="['jpg','jpeg','png']"
                    :max-size="2048"
            >
                <i-Button type="primary" icon="ios-cloud-upload-outline">批量上传收款码(一次最好不超过10张)</i-Button>
            </Upload>
        </template>

    </div>
    <i-table :data="dtData" :columns="dtCols" :height="getTableHeight" size="small" :highlight-row="true"
             @on-current-change="onCurrentChange" stripe  @on-selection-change="onSelRows" @on-row-dblclick="edit"></i-table>
    <div class="g-dg-footbar">
        <div>
            <Page :total="total" :current="myform.pageNo" show-elevator show-sizer show-total placement="top"
                  @on-change="changePage" @on-page-size-change="changePageSize" ></Page>
        </div>
    </div>
</div>
<script>
    const urls = {
        fildPage:'/api/pay/payprodimg/findPage'
        ,delete:'/api/pay/payprodimg/delete'
    };
    var vm = new Vue({
        el: '#app',
        data:{
                title: '二维码管理',
                myform: {
                    plevel : 0
                    ,selRows: null//选中的行 字符串，用,号隔开
                    ,currentRow:null//选中的行
                    ,pageNo: 1
                    ,pageSize: 10
                    ,payType:"-1"
                },
                total: 0,
                dtData: [],
                dtCols: [
                    {
                        type: 'selection'
                        ,width: 60
                        ,align: 'center'
                    },

                    {
                        title: '收款码价格',
                        key: 'imgPrice'
                    },
                    {
                        title: '适配价格',
                        key: 'fitPrice'
                    },
                    {
                        title: '支付类型',
                        key: 'payType',
                        render: function(h, params) {
                            if(params.row.payType==1){
                                return "支付宝支付";
                            }
                            if(params.row.payType==2){
                                return "微信支付";
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'createtime'
                    }
                ]
        },
        created:function(){
            this.loadData();
        },
        computed: {
            getTableHeight:function(){
                return (window.innerHeight - 150);
            }
        },
        methods: {
            loadData:function () {
                var ii = layer.load();
                $.ajax(
                    {
                        type: 'post', // 提交方式 get/post
                        url:urls.fildPage, // 需要提交的 u
                        async:true,
                        cache:false,
                        dataType:'json',
                        data:this.myform,
                        success: function(ret){
                            layer.close(ii);
                            if(ret.success){
                                vm.dtData = ret.data;
                                vm.total = ret.total;
                            }
                        },
                        error:function(){
                            layer.close(ii);
                            //layer.alert("系统错误，请稍候再试");
                        }
                    });
            },
            uploadSuccess:function(res, file) {
                if(res.success){
                    layer.msg('上传成功');
                }else{
                    layer.msg(res.msg);
                }
            },
            onSelRows:function(selection){
                if(selection){

                    this.myform.selRows = selection.map(function(q){
                        return q.cid;
                    }).toString();
                    //this.myform.selRows = selection.map(q => q.prodId).toString();
                }
            },
            reload:function(){
                this.myform.pageNo = 1;
                this.loadData();
            },
            onCurrentChange:function(currentRow, oldCurrentRow){
                this.myform.currentRow = currentRow;
            },
            changePage:function (e) {
                this.myform.pageNo = e;
                this.loadData();
            },
            changePageSize:function(e){
                this.myform.pageNo = 1;
                this.myform.pageSize = e;
                this.loadData();
            },
            help_view:function(){//帮助
                layer.open({
                    type: 2,
                    title: '收款码设置--说明',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['650px' , '500px'],
                    content: '/pay/work/pay_prod_img_help.html'
                });
            },
            edit:function(){//编辑
                if(this.myform.currentRow){
                    this.Imgview(this.myform.currentRow.imgContent);
                }
            },
            Imgview:function(cid){//查看支付二维码
                layer.open({
                    type: 2,
                    title: '查看二维码',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['400px' , '400px'],
                    content: '/comm/qr_img_view?url='+cid
                });
            },

            remove:function(){
                if(this.myform.selRows) {
                    layer.confirm('确定删除?', function(){
                        var ii = layer.load();
                        $.ajax(
                            {
                                type: 'post', // 提交方式 get/post
                                url:urls.delete, // 需要提交的 u
                                async:true,
                                cache:false,
                                dataType:'json',
                                data:vm.myform,
                                success: function(ret){
                                    layer.close(ii);
                                    layer.msg('删除成功！');
                                },
                                error:function(){
                                    layer.close(ii);
                                    //layer.alert("系统错误，请稍候再试");
                                }
                            });
                    });
                }
            }
        }
    })

    function saveOK() {
        vm.reload();
    }
    vm.help_view();
</script>
<#include "/pay/include/hmt.html" />
</body>
</html>
